<template>
	<view class="member-list">
		<view class="member flex-r ac jsb" v-for="(user, index) in list" :key="index" @tap="$CHS.goExpertHome(user.userId, user.userType)">
			<!-- 成员信息 -->
			<view class="left flex-r ac">
				<lazy-image class="member-avatar border-round" :src="user.avatar+'?imageView2/1/w/100/h/100/q/50'" :type="user.userType" fit="cover"></lazy-image>
				<text class="text-regular">{{user.nickname}}</text>
				<view class="member-tag flex-r ac jc" v-if="user.roleType != 'by'" :class="user.roleType">
					<text class="text-mini" v-if="user.roleType == 'bz'">吧主</text>
					<text class="text-mini" v-if="user.roleType == 'fb'">副吧</text>
					<text class="text-mini" v-if="user.roleType == 'fxs'">分析师</text>
				</view>
			</view>
			<!-- 私信按钮 -->
			<template v-if="user.userType == 'expert'">
				<button class="favbtn flex-r ac" :class="{'nochat': user.userIdentity != 1}" type="default" v-if="user.followStatus == 1" @tap.stop="$CHS.goChat(user.userId, user.userIdentity)">私信</button>
				<button class="favbtn flex-r ac" type="default" @tap.stop="favExpert(user)" v-else>关注</button>
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 * MemberList 球吧成员列表
	 * @description 球吧设置中的球吧成员列表
	 * @property {Array} list 球吧列表数据
	 * @example <MemberList :list="list"></MemberList>
	 */
	export default {
		name: "MemberList",
		props: {
			list: {
				type: [Array, Object],
				default: ()=>{
					return []
				}
			}
		},
		methods: {
			//关注专家
			favExpert(expert) {
				if(expert.followStatus != 1 && expert.userId != this.isFaving){ //防止重复提交
					this.isFaving = expert.userId
					this.$CHS.favExpert(expert.userId).then( res => {
						this.$set(expert, 'followStatus', 1)
					}).catch(err => {
						console.log(err);
					}).finally(()=>{
						this.isFaving = null
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-list{
		background-color: #fff;
		.member{
			width: 100%;
			height: 104rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #ededed;
			.member-avatar{
				margin-right: 20rpx;
				width: 64rpx;
				height: 64rpx;
			}
			.text-regular{
				margin-right: 10rpx;
			}
			.member-tag{
				padding: 0 12rpx;
				height: 32rpx;
				border-radius: 16rpx 16rpx 16rpx 4rpx;
				color: #fff;
				&.bz{
					background-color: #F23030;
				}
				&.fb{
					background-color: #4C88FF;
				}
				&.fxs{
					background-color: #43BF86;
				}
			}
			.favbtn{
				height: 50rpx;
				background: #FFFFFF;
				border: 1px solid #0055FF;
				border-radius: 25rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				color: #0055FF;
				margin: 0;
				padding: 0 36rpx;
				&.nochat{
					border-color: #99BBFF;
					color: #99BBFF;
					line-height: 48rpx;
				}
			}
		}
		.member:last-child{
			border: none;
		}
	}
</style>